<template>
  <div class="top-wrap">
    <div />
    <div>
      <a-dropdown>
        <a class="ant-dropdown-link"> {{ userInfo.name }} <DownOutlined /> </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;" @click="handleExit">退出系统</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent } from "vue";
  import { UserActionTypes } from "/@/store/user/action-types";
  import { DownOutlined } from "@ant-design/icons-vue";
  import { useStore } from "/@/store";
  const store = useStore();
  export default defineComponent({
    components: {
      DownOutlined,
    },
    setup() {
      const handleExit = () => {
        store.dispatch(UserActionTypes.User_Exit);
      };
      const userInfo = computed(() => {
        return store.getters.userInfo;
      });
      return { handleExit, userInfo };
    },
  });
</script>
<style lang="scss" scoped>
  .top-wrap {
    height: 100%;
    grid-area: 1/3/1/1;
    border: 1px solid $--border-color;
    box-sizing: border-box;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 100px;
    align-content: center;
  }
</style>
